<div>
  <%= tag.img src:"../images/spindle大图.png", style: "width: 100%; max-width: 900px; height: 400px; margin-left:auto; margin-right:auto; display: block;" %>
</div>

<div class="card" style="margin-top:10px;">
  <div class="card-header bg-light"><b><%= t(:spindle)%></b></div>
  <div class="card-body" style="padding:10px;">
    <div class="row">
      <div class="col-4" style=" ">
        <p style="margin-bottom:0px;" align="center"><%= t(:sea)%></p>
        <p align="center"><%= link_to(tag.img(src:"../images/sea-3.jpg", alt:"sea", style: "width: 100%; height: 200px;", class: 'img-thumbnail'), spindle_sea_products_path) %></p>
        <p style="margin-bottom:0px; padding-left: px;">
          <small><%= t("sea-instruction")%></small>
        </p>
      </div>
      <div class="col-4" style="">
        <p style="margin-bottom:0px;" align="center"><%= t(:sca)%></p>
        <p align="center"><%= link_to(tag.img(src:"../images/sca.png", alt:"sca", style: "width: 100%; height: 200px; ", class: 'img-thumbnail'), "#") %></p>
        <p align="center" style="margin-bottom:0px;">
          <small><%= t("sca-instruction")%></small>
        </p>
      </div>
      <div class="col-4" style="">
        <p style="margin-bottom:0px;" align="center"><%= t(:sci)%></p>
        <p align="center"><%= link_to(tag.img(src:"../images/sci-1.jpg", alt:"sci", style: "width: 100%; height: 200px; ", class: 'img-thumbnail'), spindle_sci_products_path) %></p>
        <p style="margin-bottom:0px;">
          <small><%= t('sci-instruction')%></small>
        </p>
      </div>
    </div>
  </div>
</div>

<% if params[:locale] != "en"%>
  <%= render "spindle_chinese"%>
<% else %>
  <%= render "spindle_en"%>
<% end %>
